<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/mvc">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <script th:src="@{socket/sockjs.min.js}"></script>
    <script th:src="@{socket/stomp.min.js}"></script>
    <script th:src="@{bootstrap/js/bootstrap.js}" type="text/javascript"></script>
    <script th:src="@{jquery/jquery-3.3.1.min.js}"></script>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
</head>
<body>
<p>
    聊天室
</p>
<form id="chatForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit"/>
</form>

<script th:inline="javascript">
    $('#chatForm').submit(function (e) {
        e.preventDefault();
        var text = $('#chatForm').find('textarea[name="text"]').val();
        sendSplittle(text);
    })

    var sock = new SockJS("/awi/endpointChat");
    var stomp = Stomp.over(sock);
    stomp.connect('guest','guest',function (frame) {
        stomp.subscribe("/user/queue/notifications",handleNotification);
    })

    function handleNotification(message) {
        $('#output').append("<b>Received: " + message.body + "</b></<br>>")
    }

    function sendSplittle(text) {
        stomp.send("/chat",{},text)
    }

    $('#stop').click(function () {
        sock.close();
    })
</script>
<div id="output"></div>

</body>
</html>